<template>
  <div class="g-idWrap">
      <div class="m-id" @click="addIdImage">
        <img src="../assets/id.jpg" alt="">
        <div class="j-reupd">
            点击上传身份证人像面
        </div>
      </div>
      <ul class="list-group">
        <li class="list-group-item">
            <span class="u-label">姓名</span>
            <span class="u-val name" v-if="editName"><input type="text" v-model="form.name" class="form-control" placeholder="请输入姓名"><i class="yesIco" @click="confirmName"></i></span>
            <span class="u-val" v-else>{{form.name}}<i class="edtIco" @click="editname"></i></span>
        </li>
        <li class="list-group-item">
            <span class="u-label">性别</span>
            <span class="u-val">{{form.gender}}</span>
        </li>
        <li class="list-group-item">
            <span class="u-label">民族</span>
            <span class="u-val">{{form.nation}}</span>
        </li>
        <li class="list-group-item">
            <span class="u-label">身份证号</span>
            <span class="u-val">{{form.idNumber}}</span>
        </li>
        <li class="list-group-item">
            <span class="u-label">身份证详情地址</span>
            <span class="u-val">{{form.address}}</span>
        </li>
    </ul>  
    <button type="button" class="btn btn-primary" @click="cards">完成注册</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            editName:false,
            form:{
                name:'',
                nation:'',
                idNumber:'',
                wechatCode:'',
                gender:'',
                birthday:'',
                idType:'01',
                relation:'0',
                address:'',
                phone1:'',
                phone2:''
                
            }
        }
    },
    methods:{
        addIdImage: function () {
           
           
        },
        editname(){
            this.editName=true
        },
        cards(){
            this.$router.push({name:'mycard'})
        },
        confirmName(){
            this.editName=false
        }
    }
}
</script>
<style scoped>
.edtIco{
    background:url('') left top no-repeat;
    background-size: contain;
    padding-left: 16px;
    margin-left: 8px;
}
.yesIco{
    background: url('') left top no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
    margin-left: 8px;
}
.btn{
    display: block;
    width: 100%;
    margin-top: 10px;
}
.g-idWrap{
    padding: 10px;
}
.list-group .list-group-item{
    border-style:none none solid none;
    margin-bottom: 0;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list-group >>> .u-label{
    flex-shrink: 0;
    padding-right: 10px;
    font-weight: 700;
}
.list-group >>> .u-val{
    word-break: break-word;
}
.list-group >>> .u-val.name{
    display: flex;
    align-items: center;
}
.m-id{
    position: relative;
}
.m-id >>> img{
    display: block;
    width: 100%;
    height: auto;
}
.j-reupd{
    position: absolute;
    bottom: 0;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    height: 32px;
    line-height: 32px;
    width: 100%;
    text-align: center;
    background-color: rgba(51, 122, 183, 0.5);
}
.m-demand dt{
    padding:10px 0;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}
.m-demand dd{
    padding: 8px 0 0 0;
}
</style>